<template>
  <div>
    <!--工具栏-->
    <el-form :inline="true" :model="formInline" size="mini" class="toolbar">
      <el-form-item label="科目分类" prop="dicCategory">
        <el-select v-model="formInline.dicCategory" clearable placeholder="请选择" style="width:120px">
          <el-option
            v-for="item in categoryOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表格区-->
    <el-table :data="tableData" border style="width: 100%;" size="small">
      <template slot="empty">还没有数据呢~ (⊙︿⊙)</template>
      <el-table-column label="学生姓名" prop="stuname" width="300" align="center"></el-table-column>
      <el-table-column prop="stuid" label="学生ID" width="300" align="center"></el-table-column>
      <el-table-column prop="workid" label="作业ID" width="300" align="center"></el-table-column>
      <el-table-column prop="status" align="center" label="作业状态" width="300">
        <template slot-scope="scope">
          <el-button align="right" type="primary" @click="dialogup = true">批改作业</el-button>
          <el-dialog title="请打分" :visible.sync="dialogup" width="30%" :before-close="handleClose">
            <el-button type="text" @click="download(scope.row.url), dialogVisible = false">下载学生作业</el-button>
            <el-input v-model="url"></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="upl(scope.row.id), dialogup = false">确定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!--分页区-->
    <!-- <div class="Pagination" style="text-align: left; margin-top: 10px;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="limit"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
    </div>-->
  </div>
</template>

<script>
import { getStore } from "../../../libs/storage";
export default {
  data() {
    return {
      dialogup: false,
      url: "",
      tableData: [],
      limit: 10,
      total: 0,
      currentPage: 1,
      formInline: {
        id: "",
        name: ""
      }
    };
  },
  created() {
    this.listByCategory();
  },
  methods: {
    //展示课程列表
    listByCategory() {
      //alert(1);
      this.$axios
        .post("/getstuwork", {
          status: "0"
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.tableData = resp.data;
            return;
          }
        })
        .catch(failResponse => {
          console.log(getStore("id"));
          console.log(failResponse.responseResult);
        });
    },
    download(url){
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url;
      link.click();
    },
    upl(id) {
      console.log("开始");
      this.$axios
        .post("/correcting", {
          id: id,
          status: "1",
          score: this.url
        })
        .then(resp => {
          console.log(id);
          if (resp && resp.status === 200) {
            console.log(resp.data);

            return;
          }
        })
        .catch(failResponse => {
          console.log(failResponse.responseResult);
        });
    }
  }
};
</script>

<style scoped>
.toolbar {
  height: 40px;
}
</style>